<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name=”renderer” content=”webkit” />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <meta name="Description" content="">
    <meta name="Keywords" content="">
    <title>校验油卡</title>
    <!-- import stylesheet -->
    <!--<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">-->
    <link href="https://cdn.bootcss.com/iview/3.4.1/styles/iview.css" rel="stylesheet">
    <script src="/static/lib/vue.min.js" th:src="@{/lib/vue.min.js}"></script>
    <script src="/static/lib/axios.min.js" th:src="@{/lib/axios.min.js}"></script>
    <!-- import iView -->
    <!--<script src="//unpkg.com/ivieivw/dist/iview.min.js"></script>-->
    <script src="https://cdn.bootcss.com/iview/3.4.1/iview.min.js"></script>
</head>
<body>
    <div id="app">
        <row :gutter="16">
            <i-col span="10" offset="2">
                <card>
                    <p slot="title">更新cookie 执行轮训锁单,回调</p>
                    <div style="height: 500px">
                        <alert type="warning">cookie 会过期, 需要人工手动查询cookie更新，更新后会自动 获取订单，异步推送订单状态，当cookie过期时将会停止, 限制修改cookie时间间隔为10分钟</alert>
                        <i-form ref="cookieFormValidate" :model="cookieFormData" :label-width="100" :rules="cookieRuleValidate">
                            <form-item label="运营商" prop="type">
                                <i-select v-model="cookieFormData.type" @on-change="selectType">
                                    <i-option value="001">中石化</i-option>
                                    <i-option value="002">中石油</i-option>
                                </i-select>
                            </form-item>
                            <form-item label="cookie" prop="cookie">
                                <i-input v-model="cookieFormData.cookie" type="textarea" :autosize="{minRows: 2,maxRows: 5}"
                                         placeholder='登录官网 中石化从cookie中获取--》 ticket="SSO-550_5TSKYUEPKKROZF5TUO9WY8O8H_H2NW0FSRFQII9FCPJIPMVPRZLIR9W1GVMY0O,687474703A2F2F31302E352E3138302E35353A383038302F77656273736F" 《--
 中石油：ASP.NET_SessionId=scgjvii34stvvaghmijosykl; RedisSessionCookiesId=554518e3-b2b9-4933-a954-b1b5106cd673'/>
                            </form-item>
                            <form-item >
                                <p><a target="_blank" href="http://www.sinopecsales.com/">中石化官网 </a>中石化 cookie 需要组装成： ticket="****" 注意必须要带 " </p>
                                <p><a target="_blank" href="javascript:;">中油好客e站 公众号微信</a> 获取cookie 需要组装成： ASP.NET_SessionId=****; RedisSessionCookiesId=**** </p>
                            </form-item>
                            <form-item>
                                <i-button :loading="btnModifyLoading" type="primary" @click="modifySystemCode">更新</i-button>
                            </form-item>
                        </i-form>
                    </div>
                </card>
            </i-col>
            <i-col style="margin-bottom: 15px" span="10" >
                <card>
                    <p slot="title">加油卡号查询</p>
                    <div style="height: 500px">
                        <i-form ref="formValidate" :model="formData" :label-width="100" :rules="ruleValidate">
                            <form-item label="运营商" prop="type">
                                <i-select v-model="formData.type" @on-change="selectType">
                                    <i-option value="001">中石化</i-option>
                                    <i-option value="002">中石油</i-option>
                                </i-select>
                            </form-item>
                            <form-item label="cookie" prop="cookie">
                                <i-input v-model="formData.cookie" type="textarea" :autosize="{minRows: 2,maxRows: 5}"
                                         placeholder='登录官网 中石化从cookie中获取--》 ticket="SSO-550_5TSKYUEPKKROZF5TUO9WY8O8H_H2NW0FSRFQII9FCPJIPMVPRZLIR9W1GVMY0O,687474703A2F2F31302E352E3138302E35353A383038302F77656273736F" 《--
     中石油：ASP.NET_SessionId=scgjvii34stvvaghmijosykl; RedisSessionCookiesId=554518e3-b2b9-4933-a954-b1b5106cd673'/>
                            </form-item>
                            <form-item >
                                <p><a target="_blank" href="http://www.sinopecsales.com/">中石化官网 </a>中石化 cookie 需要组装成： ticket="****" 注意必须要带 " </p>
                                <p><a target="_blank" href="javascript:;">中油好客e站 公众号微信</a> 获取cookie 需要组装成： ASP.NET_SessionId=****; RedisSessionCookiesId=**** </p>
                            </form-item>
                            <form-item label="加油卡号" prop="cardNo">
                                <i-input v-model="formData.cardNo" placeholder="请输入加油卡卡号"/>
                            </form-item>
                            <form-item>
                                <i-button :loading="btnLoading" type="primary" @click="submit">查询</i-button>
                            </form-item>
                        </i-form>
                        <alert v-if="result.status">
                            {{result.title}}
                            <template slot="desc">{{result.msg}} </template>
                        </alert>
                    </div>
                </card>
            </i-col>
            <i-col span="20" offset="2">
                <card>
                    <p slot="title">锁定订单表</p>
                    <i-form ref="searchForm" :model="searchForm" inline>
                        <form-item>
                            <span slot="prepend">订单号</span>
                            <i-input type="text" v-model="searchForm.orderId" placeholder="请输入订单号"></i-input>
                        </form-item>
                        <form-item >
                            <span slot="prepend">卡号</span>
                            <i-input type="password" v-model="searchForm.uid" placeholder="卡号"></i-input>
                        </form-item>
                        <form-item>
                            <i-button type="primary" @click="findAll(0)">查询</i-button>
                        </form-item>
                    </i-form>
                    <div style="margin-bottom: 15px">
                        <page :total="total" :current="current" show-total show-sizer @on-change="findAll" :page-size="searchForm.size" :page-size-opts="pageSizeOptions" @on-page-size-change="onChangeSize"/>
                    </div>
                    <i-table border :columns="columns7" :data="lockOrderList"></i-table>
                    <!--<Page :total="total" :current="searchForm.page+1" show-total show-sizer @on-change="findAll" @on-page-size-change="onChangeSize"/>-->
                </card>
            </i-col>
        </row>

    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                formData: {
                    cardNo: "",
                    type: "",
                    cookie: ""
                },
                cookieFormData: {
                    type: "",
                    cookie: ""
                },
                searchForm: {
                    uid: "",
                    callbackStatus: "",
                    orderId: "",
                    page: 0,
                    size: 10
                },
                total: 0,
                current: 1,
                pageSizeOptions: [10,30,50,100],
                ruleValidate: {
                    type: [{required: true, message: '请选择运营商', trigger: 'change'}],
                    cookie: [{required: true, message: '请填写cookie', trigger: 'blur'}],
                    cardNo: [{required: true, message: '请填写卡号', trigger: 'blur'}]
                },
                cookieRuleValidate: {
                    type: [{required: true, message: '请选择运营商', trigger: 'change'}],
                    cookie: [{required: true, message: '请填写cookie', trigger: 'blur'}],
                    cardNo: [{required: true, message: '请填写卡号', trigger: 'blur'}]
                },
                result: {
                    msg: "",
                    title: "查询结果",
                    status: false
                },
                btnLoading: false,
                btnModifyLoading: false,
                columns7: [
                    {
                        type: "index",
                        title: 'index',
                        // key: 'name'
                    },
                    {
                        title: '订单号',
                        key: 'orderId'
                    },
                    {
                        title: '卡号',
                        key: 'uid'
                    },
                    {
                        title: '回调状态',
                        key: 'callbackStatus',
                        render: function (h, params) {
                            var text = "未回调";
                            if (params.row.callbackStatus){
                                text = "已回调";
                            }
                            return h('span', text);
                        }
                    },
                    {
                        title: '回调数据',
                        key: 'callbackData'
                    },
                    {
                        title: '创建时间',
                        key: 'createTime'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: function (h, params) {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: function () {
                                            console.info(params);
                                            vm.orderCallback(params.row.id);
                                        }
                                    }
                                }, '订单回调')
                            ]);
                        }
                    }],
                lockOrderList: [
                    // {
                    //     "id": 9,
                    //     "status": "success",
                    //     "desc": "交易成功",
                    //     "code": "00",
                    //     "serialno": null,
                    //     "orderId": "55354262",
                    //     "uid": "1000113100014043375",
                    //     "itemFacePrice": "100000",
                    //     "flow": null,
                    //     "bizId": "600",
                    //     "cardNo": null,
                    //     "cardPwd": null,
                    //     "itemId": "17118",
                    //     "amt": "1",
                    //     "success": true,
                    //     "callbackStatus": true,
                    //     "callbackData": "{\"errorCode\":\"\",\"errorMsg\":\"\",\"orderId\":\"55354262\",\"status\":\"0\",\"userId\":\"552\"}",
                    //     "createTime": "2019-05-28 16:23:49",
                    //     "updateTime": "2019-05-28 16:23:50"
                    // },
                ]
            },
            methods: {
                submit: function () {
                    vm.$refs["formValidate"].validate(function (valid) {
                        if (valid) {
                            vm.btnLoading = true;
                            vm.result.status = false;
                            axios({
                                method: "post",
                                url: "/queryOilCardStatus",
                                data: vm.formData,
                            }).then(function (res) {
                                vm.result.msg = res.data;
                                vm.result.status = true;
                                vm.btnLoading = false;
                            }).catch(function (res) {
                                vm.$Message.warning(res.response.data);
                                vm.btnLoading = false;
                            })
                            // this.$Message.success('Success!');
                        } else {
                            this.$Message.error('缺少数据');
                        }
                    })
                },
                selectType: function (value) {
                    switch (value) {
                        case "001":
                            vm.formData.cookie = "ticket=\"****\"";
                            vm.cookieFormData.cookie = "ticket=\"****\"";
                            break;
                        case "002":
                            vm.formData.cookie = "ASP.NET_SessionId=****; RedisSessionCookiesId=**** ";
                            vm.cookieFormData.cookie = "ASP.NET_SessionId=****; RedisSessionCookiesId=**** ";
                            break;
                    }
                },
                findAll: function(page){
                    console.info(page);
                    page = page ? page-1 : 0;
                    this.searchForm.page = page;
                    axios({
                        method: "get",
                        url: "/order",
                        params: this.searchForm
                    }).then(function (res) {
                        vm.lockOrderList = res.data.content;
                        vm.total = res.data.totalElements;
                        vm.current = res.data.number + 1;
                    }).catch(function (res) {
                        vm.$Message.warning(res.response.data);
                    })
                },
                onChangeSize: function(pageSize){
                  vm.searchForm.size = pageSize;
                  vm.findAll();
                },
                orderCallback: function (id) {
                    axios.get("/callback/"+id).then(function (res) {
                        vm.$Message.success(res.data);
                    }).catch(function (res) {
                        vm.$Message.warning(res.response.data);
                    })
                },
                modifySystemCode: function () {
                    //cookieFormValidate
                    vm.$refs["cookieFormValidate"].validate(function (valid) {
                        if (valid) {
                            vm.btnModifyLoading= true;
                            axios({
                                method: "put",
                                url: "/code",
                                params: vm.cookieFormData
                            }).then(function (res) {
                                vm.btnModifyLoading= false;
                                vm.$Message.success(res.data);
                            }).catch(function (res) {
                                vm.btnModifyLoading= false;
                                vm.$Message.warning(res.response.data);
                            })
                        }
                    })
                }
            },
            created: function () {
                this.findAll();
            }
        })
    </script>
</body>
</html>